<template>
  <div class="app">
    <div>
      <h3>姓名:{{ person.name }}</h3>
      <h3>年龄:{{ person.age }}</h3>
      <button @click="addAge">点我年龄+1</button>
    </div>
    <hr />
    <div>
      <h3>{{ car }}</h3>
      <button @click="addMoney">点我+10</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, markRaw } from "vue";
import mockjs from "mockjs";

let person = reactive({
  name: "tony",
  age: 20,
});

let car = reactive({
  brand: "audi",
  price: 100,
});

/* 
  toRaw作用：用于获取一个响应式对象的原始对象，toRaw返回的对象不再是响应式的，不会触发视图更新
  很简单，这时候person1，就单纯是一个原始对象
*/
let person1 = toRaw(person);
// console.log(person, "@@@", person1);

function addAge() {
  person.age += 1;
}

/**
 * markRaw作用：是将对象设置为永远不可能变成响应式
 * 这里需要传递一个对象，而且是原始对象，设置这个原始对象以后都不可能是响应式对象
 * 应用场景 mockjs
 */
let car1 = markRaw({ brand: "aodi", price: 1000 });

let mockjsData = markRaw(mockjs);

let mockjsProxyData = reactive(mockjsData);
console.log(mockjsProxyData); // 并没有输出响应式对象而是原始mockjs对象

function addMoney() {
  car1.price += 10;
}
</script>

<style scoped>
.app {
  background-color: rgb(178, 117, 36);
  border-radius: 10px;
  box-shadow: 0 0 5px;
  padding: 10px;
  margin-top: 20px;
}
</style>
